<template>
  <div class="contentHistory">
    <!-- 优惠券详情列表 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{
        background: '#f2f6fc',
        color: '#303133',
        fontWeight: 'normal',
      }"
    >
      <el-table-column prop="date" label="名称" />
      <el-table-column prop="name" label="优惠券类型" />
      <el-table-column prop="name" label="可使用商品" />
      <el-table-column prop="name" label="使用门槛" />
      <el-table-column prop="name" label="面值" />
      <el-table-column prop="name" label="状态" />
    </el-table>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{
        background: '#f2f6fc',
        color: '#303133',
        fontWeight: 'normal',
      }"
    >
      <el-table-column prop="date" label="有效期" />
      <el-table-column prop="name" label="总发行量" />
      <el-table-column prop="name" label="已领取" />
      <el-table-column prop="name" label="待领取" />
      <el-table-column prop="name" label="已使用" />
      <el-table-column prop="name" label="未使用" />
    </el-table>
    <!-- 筛选搜索 -->
    <el-card class="box-card">
      <div class="top">
        <div>
          <el-icon><ZoomIn /></el-icon>
          <span>筛选搜索</span>
        </div>
        <div>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary">查询搜索</el-button>
        </div>
      </div>
      <div class="bottom">
        <div class="name">
          <span>使用状态: </span>
          <el-select v-model="typeValue" clearable placeholder="全部">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="type">
          <span>订单编号: </span>
          <input v-model="keywordVal" placeholder="订单编号" />
        </div>
      </div>
    </el-card>
    <!-- 优惠券领取记录 -->
    <el-table :data="list" :cell-style="{ 'text-align': 'center' }" border>
      <el-table-column align="center" label="优惠码"></el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="领取会员"
      ></el-table-column>
      <el-table-column align="center" label="领取方式"> </el-table-column>
      <el-table-column align="center" label="领取时间"> </el-table-column>
      <el-table-column align="center" label="当前状态"> </el-table-column>
      <el-table-column align="center" label="使用时间"> </el-table-column>
      <el-table-column align="center" prop="platform" label="订单编号">
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useTable } from "@/hook/table";
import * as http from "@/request/api";
import { useRoute } from "vue-router";
const route = useRoute();
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];

// 下拉筛选
const keywordVal = ref("");
const typeValue = ref();
const typeList = [
  {
    value: 0,
    label: "未使用",
  },
  {
    value: 1,
    label: "已使用",
  },
  {
    value: 2,
    label: "已过期",
  },
];
// 重置
function reset() {
  keywordVal.value = "";
}

// let queryId = Number(route.query.id);

let couponId = ref();
watch(
  () => Number(route.query.id),
  (val, oldVal) => (couponId.value = val),
  { immediate: true }
);

// route.query.id
console.log(couponId);

let { list, paginate, searchfn, handleSizeChange, handleCurrentChange } =
  useTable(http.coupon.CouponHistoryList, { couponId });
</script>

<style>
.contentHistory {
  width: 80%;
  margin: 20px auto;
}
.el-card.is-always-shadow {
  box-shadow: none;
  margin: 20px 0;
}

.box-card {
  margin: 10px 0;
  height: 128px;
  font-size: 14px;
}

.box-card .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card span {
  margin: 0 8px;
}

.box-card .bottom {
  margin: 20px;
  display: flex;
}
.box-card .bottom .name {
  margin: 0 50px 0 10px;
}

.box-card .type input {
  border: 1px solid rgb(218, 216, 216);
  height: 26px;
  border-radius: 5px;
  margin-left: 8px;
  padding-left: 5px;
  font-size: 12px;
  outline-color: rgb(179, 175, 175);
}

.el-card.add-card {
  --el-card-padding: 0;
  height: 55px;
  margin: 10px 0;
  /* width: 98%; */
  padding: 0 20px;
  box-sizing: border-box;
}

.el-card.add-card .el-card__body {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-card.add-card .el-card__body div:first-child span {
  margin-left: 10px;
}
</style>
